import { Link, NavLink, Outlet } from 'react-router-dom';

const moduleDisplayName = '${moduleDisplayName?js_string}';
const moduleSummary = '${moduleSummary?js_string}';
const managementPath = '${frontendRouteFullPath?js_string}';

const NAV_GROUPS = [
  {
    title: '工作台',
    items: [
      { label: '总览驾驶舱', description: '业务总览、指标看板', path: '/' },
      { label: moduleDisplayName + ' 管理', description: '数据维护与流程处理', path: managementPath },
    ],
  },
  {
    title: '系统配置',
    items: [
      { label: '账号中心', description: '登录、权限、角色', path: '/login' },
      { label: '系统特性', description: '查看启用的模块', path: '/system/features' },
    ],
  },
];

const quickLinks = [
  { label: '操作日志', path: '/system/logs' },
  { label: '帮助文档', path: '/docs' },
];

const Layout = () => {
  const currentYear = new Date().getFullYear();

  return (
    <div className="app-shell">
      <aside className="app-sidebar">
        <div className="sidebar-logo">
          <Link to="/">
            <span className="brand-title">{moduleDisplayName}</span>
            <span className="brand-subtitle">Management Console</span>
          </Link>
        </div>

        <div className="sidebar-summary">
          <p>{moduleSummary}</p>
        </div>

        {NAV_GROUPS.map((group) => (
          <div className="sidebar-group" key={group.title}>
            <p className="sidebar-group-title">{group.title}</p>
            <nav className="sidebar-nav">
              {group.items.map((item) => (
                <NavLink
                  key={item.path}
                  to={item.path}
                  end={item.path === '/'}
                  className={({ isActive }) =>
                    isActive ? 'sidebar-link is-active' : 'sidebar-link'
                  }
                >
                  <span className="sidebar-link-label">{item.label}</span>
                  <span className="sidebar-link-caption">{item.description}</span>
                </NavLink>
              ))}
            </nav>
          </div>
        ))}

        <div className="sidebar-footer">
          <div className="sidebar-quick-links">
            {quickLinks.map((link) => (
              <Link key={link.path} to={link.path} className="sidebar-quick-link">
                {link.label}
              </Link>
            ))}
          </div>
          <p>© {currentYear} · {moduleDisplayName}</p>
        </div>
      </aside>

      <div className="app-main">
        <header className="app-topbar">
          <div className="topbar-left">
            <div className="topbar-title">
              <span className="topbar-chip">业务模块</span>
              <h1>{moduleDisplayName} 管理系统</h1>
            </div>
            <p className="topbar-subtitle">快速掌握 {moduleDisplayName} 的运行态势，处理关键流程。</p>
          </div>

          <div className="topbar-right">
            <label className="topbar-search" aria-label="搜索业务数据">
              <span aria-hidden="true">🔍</span>
              <input type="search" placeholder={`搜索${'$'}{moduleDisplayName}或关键词`} />
            </label>
            <Link to={managementPath} className="pill-button">
              进入管理页
            </Link>
            <Link to="/login" className="pill-button ghost">
              切换账号
            </Link>
            <button type="button" className="avatar-button" aria-label="打开个人中心">
              <span>Admin</span>
            </button>
          </div>
        </header>

        <main className="app-content">
          <Outlet />
        </main>
      </div>
    </div>
  );
};

export default Layout;

